<template>
  <div class="detail-list">
    <div class="add" @click="addBtnClick">
      <i class="el-icon-circle-plus-outline" style="font-size: 15px; margin-right: 5px"></i>
      <span>新建</span>
    </div>
    <div class="query-class">
      <!-- <div class="query-class-title">查询分类</div>
      <el-select v-model="queryClassValue" placeholder="请选择" class="query-class-sel" size="mini">
        <el-option v-for="item in queryClassOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailListCommonBtn",
  components: {},
  props: {
    queryClass: {
      type: String,
      default: "1"
    },
    queryClassOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      queryClassValue: this.queryClass
    }
  },
  methods: {
    addBtnClick() {
      this.$parent.addBtnClick()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.detail-list {
  display: flex;
  align-items: center;
  font-size: 12px;
  .add {
    color: #2a304d;
    height: 36px;
    line-height: 36px;
    width: 60px;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
  }
  .query-class {
    display: flex;
    height: 50px;
    line-height: 50px;
    .query-class-title {
      margin-left: 10px;
      color: #666;
    }
    .query-class-sel {
      width: 165px;
      margin-left: 10px;
    }
  }
}
</style>
